<template>
  <div>
    <form-head @onSubmit="onSubmit" :is_change="is_change" :isEdit="true"/>
    <el-form ref="form" :rules="rules" :model="form" label-width="100px" class="form-width-50">
      <el-form-item label="导航名:" prop="text">
        <el-input v-model="form.text" placeholder="请输入导航名字" />
      </el-form-item>
      <el-form-item label="标题(可空):" prop="title">
        <el-input v-model="form.title" placeholder="请输入页首标题为空同上" />
      </el-form-item>
      <el-form-item label="是否使用图片:" prop="isUsePic">
        <el-switch
          v-model="form.isUsePic"
          active-color="#13ce66"
          inactive-color="#ff4949"
        />
      </el-form-item>

      <el-form-item v-if="form.isUsePic == 1" label="导航图片:" prop="iconPath">
        <upload-pic :thumb="form.iconPath" @update:thumb="form.iconPath=$event" width="100" cate_id="1"/>
      </el-form-item>
      <el-form-item v-if="form.isUsePic == 1" label="选中图片:" prop="selectedIconPath">
        <upload-pic :thumb="form.selectedIconPath" @update:thumb="form.selectedIconPath=$event" width="100" cate_id="1"/>
      </el-form-item>
      <el-form-item v-else label="导航图标:" prop="classFont">
        <i :class="form.classFont" style="font-size:40px;" />
        <el-popover
          placement="right"
          width="400"
          trigger="click"
        >
          <el-scrollbar style="height:300px;">
            <el-button v-for="item in options" :key="item" style="margin:4px;padding:5px;"><i :class="item" style="font-size:40px;" @click="selectIcon($event)" /></el-button>
          </el-scrollbar>
          <el-button slot="reference">选择图标</el-button>
        </el-popover>
      </el-form-item>
      <el-form-item label="跳转地址:" prop="pagePath">
        <el-input v-model="form.pagePath" placeholder="请输入跳转地址" />
      </el-form-item>
      <el-form-item label="排序:" prop="sort">
        <el-input v-model="form.sort" placeholder="请输入排序位置" />
      </el-form-item>
      <el-form-item label="大图标:" prop="size">
        <el-switch
          v-model="form.size"
          active-color="#13ce66"
          inactive-color="#ff4949"
        />
      </el-form-item>
      <el-form-item label="是否启用:" prop="size">
        <el-switch
          v-model="form.status"
          active-color="#13ce66"
          inactive-color="#ff4949"
        />
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
const iconfont = require('../../../assets/fonts/iconfont.json')
export default {
  name: 'TabbarForm',
  computed:{
    id(){
      return this.$store.state.user.editId
    },

  },
  data() {
    return {
      is_change: undefined,
      options: [],
      form: {
        id: 0,
        text: '',
        iconPath: '',
        selectedIconPath: '',
        pagePath: '',
        classFont: '',
        sort: '',
        size: '',
        status: true,
      },
      rules: {
        text: [
          { required: true, message: '请输入导航名', trigger: 'blur' }
        ],
        // iconPath: [
        //   { required: true, message: '请选择导航图标', trigger: 'blur' }
        // ],
        // pagePath: [
        //   { required: true, message: '请输入跳转地址', trigger: 'blur' }
        // ],
        sort: [
          { required: true, message: '请输入排序位置', trigger: 'blur' }
        ]
      }
    }
  },
  mounted() {
    if (this.$route.query.id) {
      this.id = this.$route.query.id
    }
    // console.log(iconfont)
    this.font_family = iconfont.font_family
    this.css_prefix_text = iconfont.css_prefix_text
    iconfont.glyphs.forEach((item) => {
      this.options.push(this.font_family + ' ' + this.css_prefix_text + item.font_class)
    })
    // 获取导航信息
    this.init_into()
  },
  methods: {
    // 选择图片
    selectIcon(event) {
      console.log(event.currentTarget)
      console.log(event.currentTarget.className)
      this.form.classFont = event.currentTarget.className
    },

    // 提交
    onSubmit(formName) {
      const form = this.form
      this.$refs[formName].validate(valid => {
        if (valid) {
          form.id = this.id
          form.isUsePic = form.isUsePic?'1':'0'
          form.status = form.status?'1':'0'
          form.size = form.size?'1':'0'
          // form.status === true ? form.status = 1 : form.status = 0
          this.get('/admin/BottomTab/save', form, 'POST').then(e => {this.$store.commit('user/SET_EDIT','')})
        } else {
          console.log('error submit!!')
          return false
        }
      })
      console.log('submit!')
    },

    // 获取当前数据
    init_into() {
      this.get('/admin/BottomTab/info', { 'id': this.id }, 'POST').then(e => {
        // console.log(e)
        if(this.id>0){
          this.form = e.info.tpl
          this.form.isUsePic = e.info.tpl.isUsePic == 1 
          this.form.status = e.info.tpl.status == 1 
          this.form.size = e.info.tpl.size == 1 
          
        }
        
        setTimeout(()=>{this.is_change=false},100)
      })
    }
  },
  watch: {
    form:{
      handler (val, oldVal) {
	      if(this.is_change!=undefined)
        	this.is_change=true
      },
      deep:true
    }
  }
}
</script>

<style>
.layout-all {
  margin: 10px;
}
</style>
